<template>
  <div class="match_list">
    <el-row align="middle" class="pt-5">
      <el-col :span="16">
        <p class="main_title">指定赛校验</p>
      </el-col>
    </el-row>

    <div style="display: flex; margin: 15px;0;15px;0">
      <div style="flex: 0 0 70%;padding-right: 5px;padding-left: 5px;" class="mb-4">
        <el-upload class="upload-demo" ref="uploadRef" action="/" :http-request="uploadFile" accept=".xlsx"
          :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess">
          <el-button size="small" type="primary">点击上传基础清单（xlsx格式）进行绑定</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div> -->
        </el-upload>
      </div>
    </div>

    <div style="position: sticky">
      <div class="table_container" style="width: 70%; float: left;">
        <el-row>
          <el-col :span="4" v-for="(o, index) in infos" :key="index">
            <el-card
              :body-style="o.errFlag === 0 ? { padding: '5px'} : { padding: '5px', backgroundColor: 'antiquewhite' }">
              <img :src="o.rciloopno" class="image">
              <div style="padding: 12px;">
                <span>{{ o.dove_vervel }}</span>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="sendVerify(o)">更正</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="table_page">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchData.curpage" :page-sizes="[10, 20, 50]" :page-size="searchData.pagesize"
            layout="total, sizes,  pager, jumper" :total="searchData.total">
          </el-pagination>
        </div>
      </div>
    </div>

    <div class="table_container" style="width: 15%; float: left; padding-left: 50px;">
      <el-card :body-style="{ padding: '0px' }" style="width: 300px; height: 250px;">
        <div style="padding: 20px;">
          <span>剩余：{{ info.leftCount }}</span>
        </div>
        <img :src="info.rciloopno" class="image">
        <div style="padding: 20px;">
          <el-input v-model="info.dove_vervel" style="font-size: x-large;"></el-input>
          <div class="bottom clearfix" style="padding: 10px;">
            <el-button type="text" class="button" @click="nextVerify()">下一个</el-button>
            <el-button type="text" class="button" @click="saveVerify()">保存</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { hideLoading, showLoading } from "@/utils/loading";

import enlargeImg from "@/assets/images/icon_2.png";
import narrowImg from "@/assets/images/icon_3.png";
import matchService from "@/service/matchService";
import i18n from "@/lang";

const baseURL = process.env.BASE_API;

export default {
  name: "VerifyList",
  components: {},
  data() {
    return {
      loading: false,
      boxheader: {
        // background: '#eef1f6',
        color: "#606266",
        fontWeight: 800,
        borderBottom: "2px solid #EBEEF5",
      },
      fileList: [],
      searchData: {
        id: 0,
        curpage: 1,
        pagesize: 20,
        total: 0,
      },
      infos: [],
      info: {
        dove_id: "",
        rciloopno: "",
        dove_vervel: "",
      },
      width: "600px",
      iconImg: enlargeImg,
    };
  },
  watch: {},
  mounted: function () {
    // console.log(window.screen.height);
    this.$store.dispatch("setActive", "13").then(() => {
      // this.$root.eventBus.$emit('exit')
    });
  },
  created() {
    this.ELHeight = window.screen.height - 320;
    if (window.screen.height === 900) {
      this.ELHeight = 460;
    }
    if (this.$route.query && this.$route.query.id) {
      this.searchData.id = parseInt(this.$route.query.id);
    }
    this.doList();
  },
  destroyed() {},
  methods: {
    doList() {
      this.listVerify();
      this.nextVerify();
    },
    handleBeforeUpload(file) {
      // console.log('file', file);
      const suffix = file.name.split(".").pop().toLowerCase();
      if (!["xlsx"].includes(suffix)) {
        return this.$message.error(`请上传xlsx文件.`);
      }
    },
    uploadFile(param) {
      // console.log('param-----' + param.file);
      const formData = new FormData();
      formData.append("id", this.searchData.id);
      formData.append("file", param.file);
      matchService.bindVerify(formData).then((res) => {
        if (res && res.data.result === 0) {
          this.$message.success("绑定成功!");
          this.doList();
        } else {
          this.$message.error("绑定失败！");
        }
      });
    },
    handleUploadSuccess(res) {
      console.log("res", res);
    },
    listVerify() {
      this.loading = true;
      let searchData = { ...this.searchData };
      delete searchData.total;
      let params = searchData;
      matchService.listVerify(params).then((res) => {
        this.loading = false;
        if (res && res.data.result === 0) {
          this.infos = res.data.data;
          this.searchData.total = res.data.total;
        }
      });
    },
    sendVerify(o) {
      this.info = { ...o };
    },
    saveVerify() {
      if (
        this.info.dove_vervel == "正在加载中..." ||
        this.info.dove_vervel == "已经更正完毕"
      ) {
        this.$message.info("请点击下一个选取数据!");
        return;
      } else if (this.info.dove_vervel == "") {
        this.$message.info("请输入足环号!");
        return;
      }
      let params = {
        id: this.searchData.id,
        dove_id: this.info.dove_id,
        dove_vervel: this.info.dove_vervel,
      };
      matchService.saveVerify(params).then((res) => {
        if (res && res.data.result === 0) {
          this.$message.success("更正成功!");
          this.doList();
        } else {
          this.$message.error("更正失败！");
        }
      });
    },
    nextVerify() {
      this.info.dove_vervel = "";
      let params = { id: this.searchData.id };
      matchService.nextVerify(params).then((res) => {
        if (res && res.data.result === 0) {
          this.info = res.data.data;
        }
      });
    },
    handleSizeChange(val) {
      this.searchData.pagesize = val;
      this.listVerify();
    },
    handleCurrentChange(val) {
      this.searchData.curpage = val;
      this.listVerify();
    },
    enlarge() {
      if (this.width === "600px") {
        this.width = "1000px";
        this.iconImg = narrowImg;
      } else {
        this.width = "600px";
        this.iconImg = enlargeImg;
      }
    },
  },
};
</script>

<style>
.match_list .list_setting {
  padding: 24px;
  margin-top: 14px;
  box-sizing: border-box;
  background: #fff;
  min-height: calc(100vh - 130px);
}
.main_title {
  color: #343434;
  font-size: 18px;
  margin: 7px 0 0 0;
}

img {
  max-width: 100%; /* 响应式图片 */
  height: auto; /* 保持图片比例 */
  border-radius: 5px; /* 添加圆角 */
}

.bottom {
  margin-top: 5px;
  line-height: 12px;
}
.button {
  padding: 10px;
  float: right;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
